<template>
 <view class="container">
 	<view class="car-topBg">
		<image style="width: 338upx; height: 240upx;" :src="carUrl" mode="scaleToFill"></image>
		<view class="tag1" v-show="businessType == 1">{{carType}}</view>
 	</view>
	<view class="car-content">
		<text style="margin-top: 10upx; color: #333333; font-size: 28upx; font-family: PingFang SC, PingFang SC-Bold;">{{carBrand}}</text>
		<text style="margin-top: 10upx; color: #333333; font-size: 18upx;">{{carInfo}}</text>
		<text style="margin-top: 26upx; color: #EC4863; font-size: 20upx;">{{rentAmount + '元/月起'}}</text> 
	</view>
 </view>
</template>

<script>
	export default {
		name:"home-car",
		data() {
			return {
				
			}
		},
		
		props:{
			//业务类型  1.车辆租赁 2.车辆购买
			businessType:{
				type:Number,
				default:1
			},
			// 车辆图片
			carUrl:{
				type:String,
				default:''
			},
		    // 车辆租赁类型
			carType: {
			   type:String,
			   default:''
			},
			//车辆品牌
			carBrand: {
				type:String,
				default:''
			},
			//车辆信息
			carInfo: {
				type:String,
				default:''
			},
			//金额
			rentAmount: {
				type:String,
				default:''
			}
			
		}
	}
</script>

<style lang="scss">
	.container {
		display: flex;
		flex-direction: column;
		border-radius: 16upx;
		width: 338upx;
		background-color: #FFFFFF;
		.car-topBg {
			display: inherit;
			flex-direction: column;
			width: 338upx;
			height: 240upx;
			position: relative;
			.tag1 {
				position: absolute;
				left: 0;
				top: 20upx;
				background: linear-gradient(#fffcde 0%, #ffd291 100%);
				color: #232323;
				padding: 12upx 14upx;
				border-radius: 0 8upx 8upx 0;
				font-size: 20upx;
			}	
		}
		
		.car-content {
			display: inherit;
			flex-direction: column;
		  align-items: flex-start;
			position: relative;
			background-color: #FFFFFF;
			padding: 20upx;
		}
	}
	
</style>
